/* Hero 区域（页面顶部的大横幅区域） */
.hero {
    display: flex;                /* 用 flexbox 实现内容垂直+水平居中 */
    flex-direction: column;
    justify-content: center;      /* 垂直居中 */
    align-items: center;          /* 水平居中 */
    height: 94vh;                /*  占满整个视口高度 */
    width: 100%;                  /* 占满宽度 */
    color: #fff;
    background: var(--bg-main);
    text-align: center;
    padding: 0 1rem;              /* 左右内边距适当保留 */
    box-sizing: border-box;
}


/* Hero 区域主标题 */
.hero-title {
    /* 设置响应式字体大小，在 2.5rem 到 4rem 之间，随视口宽度变化 */
    font-size: clamp(2.5rem, 6vw, 4rem);

    /* 设置上下外边距，下边距为 0.5rem */
    margin: 0 0 .5rem;

    /* 设置字体为最粗加粗 */
    font-weight: 700;
}

/* Hero 区域副标题 */
.hero-subtitle {
    /* 设置字体大小为 1.25rem（大号文本） */
    font-size: 1.25rem;

    /* 设置字体为正常粗细 */
    font-weight: 400;

    /* 设置透明度为 0.9，使其稍弱于主标题 */
    opacity: .9;
}
